<template>
<div>
  <en-table-layout
      :tableData="tableData"
      :loading="loading"
      @selection-change="handleSelectionChange"
      >
    <div slot="toolbar" class="inner-toolbar">
      <div class="toolbar-btns">
        <!-- <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="handleLeader()"
        >添加</el-button> -->
        <el-button type="primary" @click="enableLeader(1)">启用</el-button>
        <el-button type="primary" @click="enableLeader(0)">禁用</el-button>
      </div>
      <div class="toolbar-search">
        <div class="cityAddr">
          <span>
            所属城市:
          </span>
          <dg-select
            dictType="CITY_ADDRES"
            clearable
            placeholder="请选择"
            v-model="advancedForm.city"
            :defaultValue="advancedForm.city"
            @change="advancedSearchEvent"
          ></dg-select>
        </div>
        <en-table-search
          @search="searchEvent"
          @advancedSearch="advancedSearchEvent"
          advanced
          advancedWidth="465"
          placeholder="请输入关键字">
          <template slot="advanced-content">
            <el-form ref="advancedForm" :model="advancedForm"  label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="站长姓名" class="toolbar-input" prop="leader_name">
                      <el-input v-model="advancedForm.leader_name"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="站点类型" class="toolbar-input" prop="leader_type">
                    <el-select v-model="advancedForm.leader_type" placeholder="请选择站点类型" class="select-get" clearable>
                      <el-option
                        v-for="option in s_site_type"
                        :label="option.name"
                        :value="option.id"
                        :key="option.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="站点状态" class="toolbar-input" prop="status">
                      <el-select v-model="advancedForm.status" placeholder="请选择站点状态" clearable>
                        <el-option
                          v-for="(item,index) in advancedStatus" :key="index" :label="item.label" :value="item.value"></el-option>
                      </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机号码" class="toolbar-input" prop="leader_mobile">
                      <el-input v-model="advancedForm.leader_mobile" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属社区" class="toolbar-input" prop="cell_name">
                      <el-input v-model="advancedForm.cell_name" clearable></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="店铺名称" class="toolbar-input" prop="origin_site_name">
                      <el-input v-model="advancedForm.origin_site_name" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="审核状态" class="toolbar-input" prop="audit_status">
                    <el-select v-model="advancedForm.audit_status" placeholder="请选择审核状态" class="select-get" clearable>
                      <el-option label="通过" :value="2"></el-option>
                      <el-option label="未通过" :value="3"></el-option>
                    </el-select>
                </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="店铺类型" class="toolbar-input" prop="site_type">
                      <el-select v-model="advancedForm.site_type" placeholder="请选择店铺类型" class="select-get" clearable>
                      <el-option
                      v-for="(item,index) in site_types"
                      :key="index"
                      :label="item.label"
                      :value="item.value"></el-option>
                    </el-select>
                </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="站点名称" class="toolbar-input" prop="op_status">
                    <el-input v-model="advancedForm.site_name" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- <el-row>
                <el-col :span="24">
                  <el-form-item label="所在地区" class="toolbar-input" prop="region">
                    <en-region-picker
                      :api="MixinRegionApi"
                      :default="advancedForm.areas"
                      @changed="(object) => { advancedForm.region = object.last_id }"
                      class="select-get"
                      clearable
                    ></en-region-picker>
                  </el-form-item>
                </el-col>
              </el-row> -->
              <!-- <el-row>
                <el-col :span="24">
                  <el-form-item label="所属城市:" prop="city">
                    <dg-select
                      dictType="CITY_ADDRES"
                      clearable
                      placeholder="请选择"
                      v-model="advancedForm.city"
                      :defaultValue="advancedForm.city"
                    ></dg-select>
                  </el-form-item>
                </el-col>
              </el-row> -->
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="审核时间" class="toolbar-input">
                      <el-date-picker
                        v-model="advancedForm.order_time_range"
                        type="datetimerange"
                        align="center"
                        :editable="false"
                        unlink-panels
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="['00:00:00', '23:59:59']">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
          </template>
        </en-table-search>
      </div>
    </div>
    <!-- 列表渲染 -->
      <template slot="table-columns">
        <el-table-column type="selection" width="50" fixed></el-table-column>
        <el-table-column prop="leader_code" min-width="100" label="站点编码" />
        <el-table-column prop="ship_priority" min-width="100" label="配送优先级" />
        <el-table-column min-width="100" label="分拣方式">
          <template slot-scope=" { row } ">
            <span>{{ row.dispatch_type === 'SELF_GLOBAL' ? '按C端分拣' : row.dispatch_type === 'SELF_BATCH' ? '按B端分拣' : '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="审核状态">
          <template slot-scope="scope">
            <span>{{s_audit_status[scope.row.audit_status]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="cell_name" min-width="100" label="所属社区" />
        <el-table-column prop="origin_site_name" min-width="100" label="店铺名称" />
        <el-table-column label="店铺类型">
          <template slot-scope="scope">
            <span>{{s_k_site_type[scope.row.site_type]}}</span>
          </template>
        </el-table-column>
        <el-table-column label="所属地区" min-width="150">
          <template slot-scope="scope">
            <span>{{`${scope.row.province}${scope.row.city}${scope.row.county===null?'':scope.row.county} ${scope.row.town===null?'':scope.row.town}`}}</span>
            <!-- <span>{{scope.row.county===null?'':scope.row.county + scope.row.town===null?'':scope.row.town}}</span> -->
          </template>
        </el-table-column>
        <el-table-column prop="address" min-width="180" label="详细地址" />

        <el-table-column prop="site_name" min-width="100" label="站点名称" />
        <el-table-column label="站点类型">
          <template slot-scope="scope">
            <span>{{s_leader_type[scope.row.leader_type]}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="100" label="覆盖区域" prop="operate_areas" />
        <el-table-column label="站点状态">
          <template slot-scope="scope">
            <span>{{s_leader_status[scope.row.status]}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="nickname" min-width="100" label="昵称" /> -->

        <el-table-column min-width="100" prop="leader_name" label="站长姓名" />
        <el-table-column prop="midentity" min-width="150" label="身份证号" />
        <el-table-column prop="leader_mobile" min-width="100" label="手机号码" />

        <el-table-column min-width="150" label="申请时间">
          <template slot-scope="scope">
            <span>{{scope.row.add_time | unixToDate("yyyy-MM-dd hh:mm:ss") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="join_reason" min-width="100" label="申请理由" />
        <el-table-column min-width="150" label="审核时间">
          <template slot-scope="scope">
            <span>{{scope.row.audit_time | unixToDate("yyyy-MM-dd hh:mm:ss") }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="audit_remark" min-width="100" label="审核备注" />
        <el-table-column prop="remark" min-width="100" label="站点备注" />
        <el-table-column label="操作" min-width="300" fixed="right">
          <template slot-scope="scope" >
            <el-button size="mini" type="primary" @click="auditIt(scope.row)" v-if="scope.row.audit_status===1">审核</el-button>
            <el-button type="primary" @click="handlePriority(scope.row)">配送优先级</el-button>
            <el-button type="primary" @click="handlerUpload(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </template>
    <!-- 分页列表 -->
    <el-pagination
      v-if="tableData"
      slot="pagination"
      @size-change="handlePageSizeChange"
      @current-change="handlePageCurrentChange"
      :current-page="pageData.page_no"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageData.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageData.data_total">
    </el-pagination>
  </en-table-layout>

  <!--对话框用来添加修改团长信息-->
  <el-dialog
    :title="titleMap[dialogTitle]"
    :visible.sync="DialogVisible"
    width="900px"
    :append-to-body="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    >
    <div class="infomation">基本信息</div>
    <!-- 主体区域 左侧距离-->
    <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="110px">
      <div class="formItem">
        <el-form-item label="站点编码" prop="leader_id">
          <el-input v-model="addForm.leader_id" disabled class="select-type"></el-input>
        </el-form-item>
        <el-form-item label="小区名称" prop="cell_name">
          <el-input v-model="addForm.cell_name" class="select-type" placeholder="请输入小区名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="站长姓名" prop="leader_name">
          <el-input v-model="addForm.leader_name" class="select-type" clearable></el-input>
        </el-form-item>
        <el-form-item label="站长电话" prop="leader_mobile">
          <el-input v-model="addForm.leader_mobile" maxlength=11  minlength=11 class="select-type" type="tel" clearable></el-input>
        </el-form-item>

      </div>
        <!-- <el-form-item label="关联用户" prop="member_id">
          <el-select
            v-model="addForm.member_id"
            filterable
            remote
            placeholder="请输入关键词"
            clearable
            :remote-method="remoteMethod"
            :loading="remote_loading"
            class="select-type"
          >
            <el-option
              v-for="item in options"
              :key="item.member_id"
              :label="item.mobile"
              :value="item.member_id"
            >
              <span>{{item.nickname}}</span>
              <span class="mobile">{{item.mobile}}</span>
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="所在地区" prop="region">

          <div class="areaItem">
            <en-region-picker
              :api="MixinRegionApi"
              :default="areas"
              @changed="(object) => { addForm.region = object.last_id }"
              class="select-type"
              clearable
            ></en-region-picker>
            <el-input v-model="addForm.address" class="select-type detailAddr" placeholder="请输入详细地址" clearable></el-input>
          </div>
        </el-form-item>
        <!-- <el-form-item label="详细地址" prop="address">
          <el-input v-model="addForm.address" class="select-type" placeholder="请输入详细地址" clearable></el-input>
        </el-form-item> -->
        <!--高德地图-->
        <el-form-item prop="map">
          <div class="map">
            <div id="mapContainer" style="height:250px;width:710px;"></div>
            <input type="text" id="mapInput" class="map-search" clearable placeholder="请输入店铺地址" />
          </div>
        </el-form-item>

      
      <div class="infomation">站点信息</div>
      <div class="formItem">
        <el-form-item label="站点名称" prop="site_name">
          <el-input v-model="addForm.site_name" class="select-type" placeholder="请输入站点名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="站点类型" prop="leader_type">
          <el-select v-model="addForm.leader_type" class="select-type" clearable>
            <el-option :data-str="item.id"
              v-for="item in s_site_type"
              :label="item.name"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="ship_priority" label="配送优先级">
          <el-input-number v-model="addForm.ship_priority"
            controls-position="left"
            :min="0"
            :max="1000000"
            size="large">
          </el-input-number>
        </el-form-item>
        <el-form-item prop="dispatch_type" label="分拣方式">
          <el-select v-model="addForm.dispatch_type" clearable placeholder="请选择分拣方式" class="select-type" > 
            <el-option label="按B端分拣" value="SELF_BATCH"></el-option>
            <el-option label="按C端分拣" value="SELF_GLOBAL"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  label="覆盖区域：">
          <el-input  v-model="addForm.operate_areas" clearable class="select-type" ></el-input>
        </el-form-item>
        <el-form-item label="胜任理由" prop="join_reason">
          <el-input
            v-model="addForm.join_reason"
            class="select-type"
            placeholder="请输入胜任理由"
            clearable
          ></el-input>
        </el-form-item>
      </div>
      <el-form-item  label="审核备注：">
        <el-input type="textarea" height="200px" class="select-typearea"  v-model="addForm.audit_remark" clearable></el-input>
      </el-form-item>
    </el-form>

    <div class="footer">
      <div class="infooter">
        <el-button type="primary" @click="submit()">{{titleFoot[dialogTitle]}}</el-button>
        <el-button @click="DialogVisible=false">取 消</el-button>
      </div>
    </div>
  </el-dialog>
  <el-dialog title="审核" width="500px" :visible.sync="auditDialog" class="modify-model">
    <el-form
      ref="auditFormRef"
      class="riderForm"
      label-width="110px"
      size="small"
      :rules="auditRules"
      :model="auditForm">
      <el-form-item  label="审核意见：" prop="audit_status">
        <el-radio-group v-model="auditForm.audit_status" :value="2" class="select-type" @change="handleReviewChange()">
          <el-radio :label="2">审核通过</el-radio>
          <el-radio :label="3">审核驳回</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item  label="站点名称：" prop="site_name" v-show="auditForm.audit_status == 2">
        <el-input  v-model="auditForm.site_name"  clearable class="select-type" ></el-input>
      </el-form-item>
      <el-form-item  label="站点类型：" prop="leader_type" v-show="auditForm.audit_status == 2">
        <el-select v-model="auditForm.leader_type" class="select-type" clearable>
          <el-option
            v-for="option in s_audit_site"
            :label="option.name"
            :value="option.id"
            :key="option.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="dispatch_type" label="分拣方式" v-show="auditForm.audit_status == 2">
        <el-select v-model="auditForm.dispatch_type" class="select-type" clearable placeholder="请选择分拣方式"> 
          <el-option label="按B端分拣" value="SELF_BATCH"></el-option>
          <el-option label="按C端分拣" value="SELF_GLOBAL"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item  label="配送优先级：" v-show="auditForm.audit_status == 2">
        <el-input  v-model="auditForm.ship_priority" clearable class="select-type" ></el-input>
      </el-form-item>
      <el-form-item  label="覆盖区域：" v-show="auditForm.audit_status == 2">
        <el-input  v-model="auditForm.operate_areas" clearable class="select-type" ></el-input>
      </el-form-item>
      <el-form-item  label="审核备注：">
        <el-input type="textarea" height="200px" class="select-type"  v-model="auditForm.audit_remark" clearable></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer mt5">
      <el-button size="small" type="primary"  @click="submitAudit()">确 定</el-button>
      <el-button size="small" @click="auditDialog=false">取 消</el-button>
    </div>
  </el-dialog>
  <!-- 配送优先级 -->
  <el-dialog 
    title="审核" 
    width="450px" 
    :visible.sync="priorityDialog">
      <el-form :model="priorityForm" :rules="priorityFormRules" ref="priorityForm" label-width="100px">
        <el-row :gutter="20">
          <el-col>
            <el-form-item prop="ship_priority" label="配送优先级:">
              <el-input-number v-model="priorityForm.ship_priority"
                controls-position="left"
                :min="0"
                :max="1000000"
                size="large">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary"  @click="submitPriority('priorityForm')">确 定</el-button>
        <el-button size="small" @click="priorityDialog = false">取 消</el-button>
      </div>
    </el-dialog>
</div>
</template>

<script>
  import * as API_LEADER from '@/api/leader';
  import AMap from 'AMap';
  import { RegExp } from '~/ui-utils'
  import { UE } from '@/components';

  let map = null; // 地图
  let marker = null; // 自定义标记点
  export default {
    name: 'leaderList',
    data() {
      return {
        /** 列表loading状态 */
        loading: false,
        remote_loading: false,
        site: ['快递站', '便利店', '小卖部', '小超市', '洗衣店', '其他'],
        // 关联用户用到的数据
        options: [],
        value: [],
        list: [],
        states: [],
        multipleSelection: [],
        //团长等级下拉框
        s_leader_level: [
          { id: '0', name: '运营经理' },
          { id: '1', name: '运营总监' },
          { id: '2', name: '事业合伙人' },
          { id: '3', name: '联合创始人' }
        ],
        //站点类型下拉框
        s_site_type: [
          { id: 1, name: '自提站点' },
          { id: 2, name: '配送站点' }
        ],
        // 站点状态
        advancedStatus: [
          { label: '禁用', value: '0' },
          { label: '启用', value: '1' }
        ],
        // 店铺类型
        site_types: [
          { label: '快递站', value: '0' },
          { label: '便利店', value: '1' },
          { label: '小卖部', value: '2' },
          { label: '小超市', value: '3' },
          { label: '洗衣店', value: '4' },
          { label: '其他', value: '5' }
        ],
        //添加修改团长数据
        DialogVisible: false,
        // 配送优先级弹框
        priorityDialog: false,
        dialogTitle: '',
        titleMap: {
          addData: '新增团长',
          updateData: '修改团长'
        },

        titleFoot: {
          addData: '确认新增',
          updateData: '确认修改'
        },
        priorityForm: {
          leader_id: undefined,
          ship_priority: undefined
        },
        // 添加表单内的数据
        addForm: {
          //团长编号
          // leader_id: '',
          // 团长姓名
          leader_name: '',
          //站点类型
          leader_type: '',
          //关联用户
          // member_id: '',
          //小区名称
          cell_name: '',
          // 所在地区
          region: '',
          //详细地址
          address: '',
          // 站点名称
          site_name: '',
          // 站长电话
          leader_mobile: '',
          //店铺类型
          site_type: '',
          //胜任理由
          join_reason: '',
          //覆盖区域
          operate_areas: '',
          //备注
          audit_remark: '',
          //经纬度
          lng: '',
          lat: '',
          // 配送优先级
          ship_priority: '',
          // 分拣配送方式
          dispatch_type: ''
        },
        //查询表单内的数据
        advancedForm: {
          //关键字
          keyword: '',
          // 营业状态
          op_status: '',
          // 所在地区
          region: '',
          // 所属城市
          city: '',
          // 站点类型
          member_id: '',
          // 站点类型
          leader_type: ''
        },
        // 分页参数配置
        params: {
          page_no: 1,
          page_size: 10
        },
        // 添加表单验证
        addFormRules: {
          leader_name: [
            { required: true, message: '请输入团长姓名', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          leader_type: [
            { required: true, message: '请选择团长类型', trigger: 'change' }
          ],
          leader_mobile: [this.MixinRequired('联系电话不能为空！'),
            { validator: (rule, value, callback) => {
              if (!RegExp.mobile.test(value)) {
                callback(new Error('联系电话格式不正确！'))
              } else {
                callback()
              }
            } }
          ],
          // leader_mobile: [
          //   { required: true, message: '请输入站长电话', trigger: 'blur' },
          //   { min: 11, max: 11, message: '请输入正确的电话号码', trigger: 'blur' }
          // ],
          member_id: [{ required: true, message: '请输入内容', trigger: 'change' }],
          cell_name: [
            { required: true, message: '请输入小区名称', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请输入所在地区', trigger: 'change' }
          ],
          address: [
            { required: true, message: '请输入详细地址', trigger: 'blur' }
          ],
          site_name: [
            { required: true, message: '请输入站点名称', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
          ],
          site_type: [
            { required: true, message: '请选择站点类型', trigger: 'change' }
          ],
          join_reason: [
            { required: false, message: '请输入胜任理由', trigger: 'blur' }
          ],
          ship_priority: [
            { required: true, message: '请输入配送优先级', trigger: 'blur' }
          ],
          dispatch_type: [
            { required: true, message: '请输入分拣方式', trigger: 'blur' }
          ]
        /** 地图点位 */
          // map: [
          //   { required: true, message: '请设置有效的地图点位', trigger: 'change' }
          // ]
        },

        auditRules: {
          site_name: [
            { required: true, message: '请输入站点名称', trigger: 'blur' },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
          ],
          leader_type: [
            { required: true, message: '请选择站点类型：', trigger: 'change' }
          ],
          operate_areas: [
            { required: true, message: '请输入覆盖区域', trigger: 'blur' }
          ],
          audit_status: [
            { required: true, message: '请选择审核意见', trigger: 'change' }
          ],
          audit_remark: [
            { required: true, message: '请输入审核备注：', trigger: 'blur' }
          ],
          dispatch_type: [
            { required: true, message: '请输入分拣方式', trigger: 'blur' }
          ]
        },
        priorityFormRules: {
          ship_priority: [
            {
              required: true,
              message: '配送优先级不能为空',
              trigger: 'blur'
            }
          ] 
        },
        areas: [],
        /** 列表数据 */
        tableData: [],
        /** 列表分页数据 */
        pageData: [],
        /** 当前发票所关联的商品列表信息 */
        leaderList: [],
        Review: false,
        auditDialog: false,
        auditForm: {
          site_name: '', 
          leader_type: '',
          operate_areas: '',
          ship_priority: '',
          audit_status: '',
          audit_remark: '',
          dispatch_type: '',
          id: ''
        },
        s_audit_status: ['未申请', '已申请', '通过', '不通过'],
        s_leader_type: ['', '自提站点', '配送站点'],
        s_leader_status: ['禁用', '启用'],
        s_k_site_type: ['快递站', '便利店', '小卖部', '小超市', '洗衣店', '其他'],
        s_audit_site: [
          { id: '1', name: '自提站点' },
          { id: '2', name: '配送站点' }
        ]
      }
    },
    mounted() {
      this.getLeaderList();
    },
    methods: {
      handleSelectionChange (val) {
        this.multipleSelection = val;
      },
      enableLeader (status) {
        if (!this.multipleSelection.length) {
          this.$message.warning(`请选择自提点！`);
          return;
        }
        let _selectIds = [];
        for (let item of this.multipleSelection) {
          _selectIds.push(item.leader_id);
        }
        if (_selectIds.length > 0) {
          let _params = {
            'leader_ids': _selectIds.toString(),
            'status': status
          };
          API_LEADER.openOrCloseLeader(_params).then((res) => {
            this.$message.success(res.message);
            this.getLeaderList();
          });
        }
      },
      /**
        * @date 2020/10/12
        * @author 张凯强
        * @description { 团长审核 }
      */
      handlePriority(row) {
        this.priorityDialog = true;
        this.priorityForm = {
          leader_id: row.leader_id,
          ship_priority: row.ship_priority
        }
      },
      submitPriority() {
        this.$refs['priorityForm'].validate((valide) => {
          if (valide) {
            API_LEADER.getUpdatePriority(this.priorityForm).then(response => {
              this.$message.success('操作成功!!!')
              this.priorityDialog = false;
              this.getLeaderList();
            }).catch((error) => {
              console.log(error)
            })
          }
        })
      },
      /**
        * @date 2020/07/30
        * @author kjh
        * @description { 团长审核 }
      */
      auditIt(row) {
        this.auditForm.site_name = row.site_name;
        this.auditDialog = true;
        this.auditForm.id = row.leader_id;
        this.auditForm.audit_status = 2;
        this.auditForm.operate_areas = '';
        this.auditForm.audit_remark = '';
      },
      submitAudit() {
        this.$refs.auditFormRef.validate(valid => {
          if (valid) {
            this.loading = true;
            let _params = {
              ...this.auditForm
            };
            API_LEADER.auditDistributor(_params).then(response => {
              this.$message.success(response.message);
              this.getLeaderList();
            });
            this.loading = false;
            this.auditDialog = false;
          }
        });
      },

      //提交验证信息
      submit(){
        this.$refs.addFormRef.validate(valid => {
          if (valid) {
            if (this.dialogTitle === 'addData') {
              this.loading = true;
              API_LEADER.addLeaderList(this.addForm)
                .then(response => {
                  this.loading = false;
                  this.DialogVisible = false;
                  this.$message({
                    message: '添加成功',
                    type: 'success'
                  });
                  this.getLeaderList();
                })
                .catch(() => {
                  this.loading = false;
                });
            } else {
              this.loading = true;
              API_LEADER.updateLeaderList(this.addForm)
                .then(response => {
                  this.loading = false;
                  this.DialogVisible = false;
                  this.$message({
                    message: '修改成功',
                    type: 'success'
                  });
                  this.getLeaderList();
                })
                .catch(() => {
                  this.loading = false;
                });
            }
          }
        });
      },
      
      /**
        * @date 2020/11/05
        * @author luocheng
        * @description { 审核信息切换 }
      */
      handleReviewChange(val) {
        let form = this.auditForm.audit_status;
        if (form === '2') {
          this.Review = true;
        } else {
          this.Review = false;
          // this.auditForm = {
          //   site_name: '',
          //   leader_type: '',
          //   operate_areas: '',
          //   ship_priority: '',
          //   audit_status: ''
          // }
        }
      },
      /**
        * @date 2020/10/31
        * @author kaiqiang
        * @description { 修改团长站点信息 }
      */
      handlerUpload(row) {
        this.DialogVisible = true;
        this.dialogTitle = 'updateData';
        // 传入团长编号
        this.$nextTick(async () => {
          this.resetAdd();
          this.askLeaderDetail(row.leader_id);
          await this.initMap();
          this.$nextTick(() => {
            setTimeout(this.initAutocomplete(), 10000);
          });
        });
      },
      /**
       * @date 2020/06/13
       * @author kjh
       * @description {点击添或者修改团长信息}
      */
      // handleLeader(row) {
      //   this.DialogVisible = true;
      //   if (row===undefined) {
      //     this.dialogTitle = 'addData';
      //     this.$nextTick(async () => {
      //       await this.initMap();
      //       this.$nextTick(() => {
      //         setTimeout(this.initAutocomplete(), 10000);
      //       });
      //       this.resetAdd();
      //       this.areas = [];
      //     });
      //   }
      //   else {
      //     this.dialogTitle = 'updateData';
      //     // 传入团长编号
      //     this.$nextTick(async () => {
      //       this.resetAdd();
      //       this.askLeaderDetail(row.leader_id);
      //       await this.initMap();
      //       this.$nextTick(() => {
      //         setTimeout(this.initAutocomplete(), 10000);
      //       });
      //     });
      //   }
      // },

      resetAdd() {
        if (this.$refs.addFormRef !== undefined){
          this.$refs.addFormRef.resetFields();
          this.areas = [];
        }
      },

      askLeaderDetail(id) {
        this.loading = true;
        API_LEADER.askLeaderList(id)
          .then(response => {
            this.loading = false;
            const { leader, member } = response;
            console.log('res:', response)
            this.options = [
              {
                nickname: leader.nickname,
                mobile: leader.mobile,
                member_id: leader.member_id
              }
            ];
            this.areas = [
              leader.province_id,
              leader.city_id,
              leader.county_id || -1,
              leader.town_id || -1
            ];
            this.$nextTick(() => {
              this.addForm = leader;
              this.addForm.site_type = this.addForm.site_type + '';
              const _lng = leader.lng;
              const _lat = leader.lat;
              if (_lng || _lat) {
                let _position = new AMap.LngLat(_lng, _lat);
                this.showMapMarker(_position);
              }
            });
          })
          .catch(() => {
            this.loading = false;
          });
      },

      /**
       * @date 2020/06/14
       * @author kjh
       * @description { 远程搜索 }
      */
      remoteMethod(query) {
        if (query !== '') {
          this.getMemberList(query);
        } else {
          this.options = [];
        }
      },

      /*
        * @date 2020-02-16
        * @author wolfMan
        * @description {初始化地图}
      */
      initMap() {
        // 初始化地图
        map = new AMap.Map('mapContainer', {
          resizeEnable: true,
          zoom: 16
        });
        // 生成自定义标记点
        marker = new AMap.Marker({
          position: map.getCenter(),
          cursor: 'move',
          raiseOnDrag: true, // 标记点拖拽
          offset: new AMap.Pixel(-13, -30) // 以 icon 的 [center bottom] 为原点
        });
        // 生成地图内自动填充输入框
        const placeSearch = new AMap.PlaceSearch({ map: map });
        marker.setMap(map);
        // map点击事件生成自定义标记点
        map.on('click', e => {
          this.setAddress(e.lnglat);
          marker.setPosition(e.lnglat);
        });
        // 点击标记点选择地址
        placeSearch.on('markerClick', e => {
          this.setAddress(e.event.lnglat);
        });
        // 添加插件到map上
        AMap.plugin(
          ['AMap.ToolBar', 'AMap.Scale', 'AMap.PlaceSearch'],
          function() {
            map.addControl(new AMap.PlaceSearch());
            map.addControl(new AMap.ToolBar());
            map.addControl(new AMap.Scale());
          }
        );
      },

      /*
        * @date 2020-02-16
        * @author wolfMan
        * @description {设置地图标点}
      */
      showMapMarker(_lnglat) {
        map.setCenter(_lnglat);
        marker.setPosition(_lnglat);
      },

      /*
        * @date 2020-02-16
        * @author wolfMan
        * @description {自动填充地址}
      */
      setAddress(lnglat) {
        const geocoder = new AMap.Geocoder();
        geocoder.getAddress(lnglat, (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            const {
              regeocode: {
                formattedAddress,
                addressComponent: { province, city, district }
              }
            } = result;
            if (!this.addForm.add || this.addForm.add.trim() === '') {
              this.$set(this.addForm, 'add', formattedAddress);
            }
            this.$set(this.addForm, 'lng', lnglat.lng);
            this.$set(this.addForm, 'lat', lnglat.lat);
            this.$set(this.addForm, 'map', [lnglat.lng, lnglat.lat]);
          }
        });
      },

      /*
        * @date 2019-12-06
        * @author wolfMan
        * @description {自动匹配地址选项}
      */
      initAutocomplete() {
        const mapAutoComplete = new AMap.Autocomplete({ input: 'mapInput' });
        mapAutoComplete.on('select', res => {
          if (res.poi.location) {
            const _location = res.poi.location;
            this.setAddress(_location);
            let _position = new AMap.LngLat(_location.lng, _location.lat);
            this.showMapMarker(_position);
          } else {
            this.$message.warning('您选择的地址不是一个具体的地址');
          }
        });
      },

      /** 分页大小发生改变 */
      handlePageSizeChange(size) {
        this.params.page_size = size
        this.getLeaderList();
      },

      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page
        this.getLeaderList();
      },

      /** 搜索事件触发 */
      searchEvent(data) {
        Object.keys(this.advancedForm).forEach(key => delete this.params[key]);
        this.params = {
          ...this.params,
          keyword: data
        }
        this.params.page_no = 1
        this.getLeaderList();
      },

      /** 高级搜索事件触发 */
      advancedSearchEvent() {
        this.params = {
          ...this.params,
          ...this.advancedForm
        }
        delete this.params.start_time;
        delete this.params.end_time;
        if (this.advancedForm.order_time_range) {
          this.params.start_time = this.advancedForm.order_time_range[0].getTime() / 1000
          this.params.end_time = this.advancedForm.order_time_range[1].getTime() / 1000
        }
        delete this.params.keyword;
        delete this.params.order_time_range;
        for (const _key in  this.params) {
          if (this.params[_key] === '') { // 当条件值为''时去除条件
            delete this.params[_key];
          }
        }
        this.params.page_no = 1
        this.getLeaderList();
      },

      /** 高级搜索中 分类选择组件值发生改变 */
      categoryChanged(data) {
        this.advancedForm.category_path = data.category_path || ''
      },

      /**
       * @date 2020/06/12
       * @author kjh
       * @description { 页面初始化团长信息 }
       */
      getLeaderList() {
        this.loading = true;
        for (const _key in this.params) {
          if (this.params[_key] === '') { // 当条件值为''时去除条件
            delete this.params[_key];
          }
        }
        API_LEADER.getLeaderList(this.params)
          .then(response => {
            this.loading = false;
            // for (let i = 0; i < response.data.length; i++){
            //   if (response.data[i].audit_status === 2){
            //     delete response.data[i];
            //   }
            // }
            this.tableData = response.data;
            this.pageData = {
              page_no: response.page_no,
              page_size: response.page_size,
              data_total: response.data_total
            };
          })
          .catch(() => {
            this.loading = false;
          });
      }
    }
  }
</script>


<style type="text/scss" lang="scss" scoped>
//顶部工具栏样式
.inner-toolbar{
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }

//基本信息和站点信息
.infomation {
  font-size: 15px;
  font-weight: bold;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid;
}

/deep/ .el-input__inner {
  width: 100%;
}

.app-address-body .show {
  width: 100px;
}

//地图和所在地区组件
/deep/ .app-address {
  width: 100% !important;
  height: 32px;
  .app-address-title {
    padding: 0 20px 0 15px;
    height: 32px;
    line-height: 32px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
  }
}

//高德地图
.map {
  position: relative;
  width: 500px;
  .map-search {
    position: absolute;
    top: 15px;
    right: 15px;
    padding: 5px 10px;
    width: 300px;
    line-height: 22px;
    border: none;
    border-radius: 4px;
    outline: none;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    overflow: hidden;
  }
}

//设置对话框两个按钮居中
.footer {
  display: flex;
  justify-content: center;
}

//设置高德地图输入框位置和尺寸
.map .map-search {
  width: 200px;
  left: 60px;
}

.select-get{
  width: 100%;
}

//设置对话框内的输入框宽度
.select-type {
  width: 300px;
}
//设置备注的输入框宽度
.select-typearea {
  width: 710px;
}

//设置远程搜索(关联用户)左右对齐
.mobile {
  float: right;
}
.formItem{
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
}
.areaItem{
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  .detailAddr{
    width: 400px;
    margin-left: 10px;
  }
}
//计数器宽度
/deep/ .el-input-number {
  width: 300px;
}
</style>

<style type="text/scss" lang="scss">
.toolbar-input .el-form-item__label {
  font-weight: normal;
}

//显示高德地图输入框提示
.amap-sug-result {
  z-index: 9999;
}
.toolbar-search{
  display: flex;
  flex-flow: row nowrap;
  .cityAddr{
    margin-right: 10px;
    font-size: 12px;
  }
}
</style>
